<template>
  <div>
    <BasicTable @register="registerTable" @resize-column="handleResizeColumn">
      <template #toolbar>
        <a-button type="primary" @click="handleCreate"> 新增 </a-button>
      </template>

      <template #action="{ record }">
        <TableAction
          :actions="[
            {
              icon: 'ant-design:setting-outlined',
              tooltip: '维护',
              onClick: handleMaintenance.bind(null, record),
            },
            {
              icon: 'ant-design:delete-outlined',
              color: 'error',
              tooltip: '删除',
              popConfirm: {
                title: `您确定要删除 ${record.name} 么？`,
                placement: 'topRight',
                confirm: handleDelete.bind(null, record),
              },
              ifShow: record['code'] != record['formCode'],
            },
            {
              icon: 'material-symbols:content-copy-outline',
              tooltip: '复制',
              onClick: handleCopy.bind(null, record),
            },
            {
              icon: 'carbon:license-maintenance',
              tooltip: '同步',
              onClick: handleSync.bind(null, record),
            },
            {
              icon: 'material-symbols:open-in-new-rounded',
              tooltip: '打开',
              onClick: handleOpen.bind(null, record),
            },
          ]"
        />
      </template>
    </BasicTable>
    <FormModuleModal @register="registerModal" @success="handleSuccess" />
    <FormModuleCopyModal @register="registerCopyModal" @success="handleSuccess" />
    <FormModuleSyncModal @register="registerSyncModal" @success="handleSuccess" />
  </div>
</template>
<script lang="ts">
  import { defineComponent, computed, onMounted } from 'vue';
  import { BasicTable, useTable, TableAction } from '/@/components/Table';
  import FormModuleModal from './FormModuleModal.vue';
  import FormModuleCopyModal from './FormModuleCopyModal.vue';
  import FormModuleSyncModal from './FormModuleSyncModal.vue';
  import { useModal } from '/@/components/Modal';
  import { columns, searchFormSchema } from './formModule.data';
  import { useMessage } from '/@/hooks/web/useMessage';
  import { useRouter } from 'vue-router';
  import { useGo } from '/@/hooks/web/usePage';
  import { useTabs } from '/@/hooks/web/useTabs';

  import { getVisualListModuleByFormCode, getVisualDelModule } from '/@/api/module/module';
  export default defineComponent({
    name: 'FormModule',
    components: {
      BasicTable,
      FormModuleModal,
      TableAction,
      FormModuleCopyModal,
      FormModuleSyncModal,
    },
    setup() {
      const go = useGo();
      const { setTitle } = useTabs();
      const { currentRoute } = useRouter();
      const formCode = computed(() => currentRoute.value?.query?.formCode);
      const [registerModal, { openModal }] = useModal();
      const [registerCopyModal, { openModal: openCopyModal }] = useModal();
      const [registerSyncModal, { openModal: openSyncModal }] = useModal();

      const { createMessage } = useMessage();
      const [registerTable, { reload, getDataSource, setProps }] = useTable({
        title: '模块',
        api: getVisualListModuleByFormCode,
        columns,
        formConfig: {
          schemas: searchFormSchema,
        },
        searchInfo: {
          op: 'search',
        }, //额外的参数
        useSearchForm: true,
        showTableSetting: true,
        pagination: false,
        bordered: true,
        indexColumnProps: { width: 50 },
        showIndexColumn: false,
        beforeFetch: (info) => {
          let newInfo = info;
          if (formCode.value) {
            newInfo.formCode = formCode.value;
          }
          return newInfo;
        },
        rowKey: 'id',
        // rowSelection: {
        //   type: 'checkbox',
        // },
        actionColumn: {
          width: 180,
          title: '操作',
          dataIndex: 'action',
          slots: { customRender: 'action' },
          fixed: 'right',
        },
      });

      function handleCreate() {
        openModal(true, {
          record: {
            formCode: formCode.value,
          },
          isUpdate: false,
        });
      }

      function handleMaintenance(record: Recordable) {
        go({
          path: '/managerPageSetup',
          query: {
            moduleCode: record.code,
            formCode: record.formCode,
            title: record.name,
            cacheName: `managerPageSetup${record.code}`,
          },
        });
      }

      const handleDelete = async (record: Recordable) => {
        try {
          const params = {
            moduleCode: record.code,
          };
          await getVisualDelModule(params);
          createMessage.success('操作成功');
          handleSuccess();
        } catch (err) {
          console.error(err);
        } finally {
        }
      };

      function handleSuccess() {
        reload();
      }

      //   const handleDesign = (record) => {
      //     const { query } = currentRoute.value as any;
      //     let routeUrl: any = {};
      //     routeUrl = resolve({
      //       path: '/formViewDesign',
      //       query: {
      //         formCode: query?.formCode,
      //         id: record.id,
      //       },
      //     });
      //     const height = screen.height;
      //     const width = screen.width;
      //     window.open(
      //       routeUrl.href,
      //       '',
      //       `height=${height},width=${width},top=0, left=0,alwaysRaised=true,toolbar=no,location=no,resizable=no, scrollbars=yes ,`,
      //     );
      //   };

      //复制
      const handleCopy = (record) => {
        openCopyModal(true, {
          record: { formCode: record.formCode, moduleCode: record.code, name: record.name },
          isUpdate: false,
        });
      };
      //同步
      const handleSync = async (record) => {
        const list = await getDataSource();
        openSyncModal(true, {
          record: { formCode: record.formCode, moduleCode: record.code, name: record.name },
          isUpdate: false,
          list,
        });
      };
      //打开
      const handleOpen = (record) => {
        go({
          path: '/smartModulePage',
          query: {
            moduleCode: record.code,
          },
        });
      };

      const fetch = () => {
        if (currentRoute.value.query?.title) {
          const title = '模块-' + currentRoute.value.query.title;
          setProps({ title });
          setTitle(title);
        }
      };
      onMounted(fetch);

      return {
        registerTable,
        handleCreate,
        handleMaintenance,
        handleDelete,
        handleSuccess,
        handleResizeColumn: (w, col) => {
          col.width = w;
        },
        registerModal,
        handleCopy,
        handleSync,
        handleOpen,
        registerCopyModal,
        registerSyncModal,
      };
    },
  });
</script>
